<div class="layui-card" style="box-shadow: none;border: none;">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title" id="message_title" style="text-align: center;padding-bottom: 5px">
            <li><i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-icon-loading"></i></li>
        </ul>
        <script id="message_title_tpl" type="text/html">
            {{# for(var i=0;i<d.length ;i++){ }}
            <li data-type="{{d[i].type}}" class="message_li {{d[i].class}}">{{d[i].title}}({{d[i].count}})</li>
            {{# } }}
        </script>

        <div class="layui-tab-content" style="padding: 0;">
            <!-- tab1 -->
            <div class="layui-tab-item layui-show">
                <div class="message-list" id="message-list-1"></div>
                <script id="template-1" type="text/html">
                    {{# for(var i=0;i<d.data.length ;i++){ }}
                    <a class="message-list-item" onclick="show_order($(this),'{{d.data[i].id}}','{{d.data[i].source}}')"
                       href="javascript:;">
                        <i class="layui-icon layui-icon-speaker message-item-icon"></i>
                        <div class="message-item-right">
                            <h2 class="message-item-title">{{d.data[i].content}}</h2>
                            <div class="message-item-text" style="display: flex">
                                <div style="width: 98%">
                                    <span>下单会员：{{d.data[i].user.code}}</span>
                                </div>
                                {{# if(d.data[i].is_admin_read === 0){ }}
                                <div class="mark"><span class="layui-badge-dot"></span></div>
                                {{# } }}
                            </div>
                            <p class="message-item-text">{{d.data[i].create_time}}</p>
                        </div>
                    </a>
                    {{# } }}
                </script>
                <button data-type='1' class="message-btn-clear all_read">
                    <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-icon-loading"
                       style="display: none"></i>
                    全部标记已读
                </button>
            </div>
            <!-- tab2 -->
            <div class="layui-tab-item">
                <div class="message-list" id="message-list-2"></div>
                <script id="template-2" type="text/html">
                    {{# for(var i=0;i<d.data.length ;i++){ }}
                    <a class="message-list-item" onclick="show_user($(this),'{{d.data[i].id}}','{{d.data[i].source}}')"
                       href="javascript:;">
                        <i class="layui-icon layui-icon-speaker message-item-icon"></i>
                        <div class="message-item-right">
                            <h2 class="message-item-title">{{d.data[i].content}}</h2>
                            <div class="message-item-text" style="display: flex">
                                <div style="width: 98%">
                                    <span>推荐人：{{d.data[i].user.code}}</span>
                                </div>
                                {{# if(d.data[i].is_admin_read === 0){ }}
                                <div class="mark"><span class="layui-badge-dot"></span></div>
                                {{# } }}
                            </div>
                            <p class="message-item-text">{{d.data[i].create_time}}</p>
                        </div>
                    </a>
                    {{# } }}
                </script>

                <a data-type='2' class="message-btn-clear all_read">
                    <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-icon-loading"
                       style="display: none"></i>
                    全部标记已读
                </a>
            </div>
            <!-- tab3 -->
            <div class="layui-tab-item">
                <div class="message-list" id="message-list-3"></div>

                <script id="template-3" type="text/html">
                    {{# for(var i=0;i<d.data.length ;i++){ }}
                    <a class="message-list-item"
                       onclick="show_message($(this),'{{d.data[i].id}}','{{d.data[i].source}}')" href="javascript:;">
                        <div class="message-item-right">
                            <h2 class="message-item-title">{{d.data[i].content}}</h2>
                            <div class="message-item-text" style="display: flex">
                                <div style="width: 98%">
                                    <span>反馈会员：{{d.data[i].user.code}}</span>
                                </div>
                                {{# if(d.data[i].is_admin_read === 0){ }}
                                <div class="mark"><span class="layui-badge-dot"></span></div>
                                {{# } }}
                            </div>
                            <p class="message-item-text">{{d.data[i].create_time}}</p>
                        </div>
                    </a>
                    {{# } }}
                </script>

                <a data-type='3' class="message-btn-clear all_read">
                    <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-icon-loading"
                       style="display: none"></i>
                    全部标记已读
                </a>
            </div>
        </div>
    </div>
</div>
<script>

    layui.use(['laytpl', 'flow'], function () {
        var $ = layui.jquery;
        var flow = layui.flow;
        var laytpl = layui.laytpl;
        var admin_map = $('#admin_map').val();
        var url = '/' + admin_map + '/notice/getData.html';
        $.ajax({
            type: 'GET',
            url: '/' + admin_map + '/notice/group.html',
            dataType: "json",
            success: function (data) {
                if (data.code == 1) {
                    var getTpl = message_title_tpl.innerHTML
                        , view = document.getElementById('message_title');
                    laytpl(getTpl).render(data.result, function (html) {
                        view.innerHTML = html;
                    });

                    getData(1, url, '#message-list-1', 'template-1');
                } else {

                }
            }
        });

        function getData(type, url, e, tpl = 'template', end = '没有更多了') {
            var tpls = tpl;
            flow.load({
                elem: e
                , isLazyimg: true
                , end: '<div class="layui-flow-more" >' + end + '</div>'
                , done: function (page, next) {
                    $.ajax({
                        type: 'GET',
                        url: url,
                        data: {page: page, type: type},
                        dataType: "json",
                        success: function (data) {

                            if (data.code == 1) {
                                if (data.data.length > 0) {
                                    var tpl = document.getElementById(tpls).innerHTML;
                                    laytpl(tpl).render({
                                        data: data.data,
                                        page: data.page,
                                        type: type
                                    }, function (html) {
                                        next(html, page < data.pages);
                                    });
                                } else {
                                    next('', page < data.pages);
                                }
                            }
                        }
                    });
                }
            });
        }

        $('#message_title').on('click', '.message_li', function () {
            const type = $(this).attr('data-type');
            getData(type, url, '#message-list-' + type, 'template-' + type);
        });

        $(".all_read").click(function () {
            var that = $(this);
            var type = that.attr('data-type');
            var load = that.find('.layui-icon-loading');
            load.show();
            $.ajax({
                type: 'GET',
                url: '/' + admin_map + '/notice/all_read.html',
                data: {type: type},
                dataType: "json",
                success: function (data) {
                    load.hide();
                    that.text(data.msg).removeClass('all_read').attr('disabled', true);
                    noticeCount();
                }
            });
        });

    });

    function show_order(that, id, source) {
        var mark = that.find('.mark');
        mark.empty();
        var admin_map = $('#admin_map').val();
        zhiju_show('订单详情', '/' + admin_map + '/notice/show_order.html?id=' + id + '&source=' + source, 1600, 1200);
    }

    function show_user(that, id, source) {
        var mark = that.find('.mark');
        mark.empty();
        var admin_map = $('#admin_map').val();
        zhiju_show('新注册会员', '/' + admin_map + '/notice/show_user.html?id=' + id + '&source=' + source, 600, 800);
    }

    function show_message(that, id, source) {
        var mark = that.find('.mark');
        mark.empty();
        var admin_map = $('#admin_map').val();
        zhiju_show('会员反馈', '/' + admin_map + '/notice/show_message.html?id=' + id + '&source=' + source, 600, 800);
    }

</script>
<style>
    /** 消息列表样式 */
    .message-list {
        top: 48px;
        left: 0;
        right: 0;
        bottom: 45px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .message-list-item {
        display: block;
        padding: 10px 20px;
        line-height: 24px;
        position: relative;
        border-bottom: 1px solid #e8e8e8;
    }

    .message-list-item:hover, .message-btn-clear:hover, .message-btn-more:hover {
        background: #F2F2F2;
    }

    .message-list-item .message-item-icon {
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin-top: -20px;
        border-radius: 50%;
        position: absolute;
        left: 20px;
        top: 50%;
    }

    .message-list-item .message-item-icon.layui-icon {
        color: #fff;
        font-size: 22px !important;
        text-align: center;
        background-color: #FE5D58;
    }

    .message-list-item .message-item-icon + .message-item-right {
        margin-left: 55px;
    }

    .message-list-item .message-item-title {
        color: #666;
        font-size: 14px;
    }

    .message-list-item .message-item-text {
        color: #999;
        font-size: 12px;
    }

    .message-list-item > .layui-badge {
        position: absolute;
        right: 20px;
        top: 12px;
    }

    .message-list-item > .layui-badge + .message-item-right {
        margin-right: 50px;
    }

    .message-btn-clear, .message-btn-more {
        color: #666;
        display: block;
        padding: 10px 5px;
        line-height: 24px;
        text-align: center;
        cursor: pointer;
    }

    .message-btn-clear {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        border: 0;
        background-color: #fff;
        border-top: 1px solid #e8e8e8;
    }

    .message-btn-more {
        color: #666;
        font-size: 13px;
    }

    .message-btn-more.ew-btn-loading > .ew-btn-loading-text {
        font-size: 13px !important;
    }

    .message-list-empty {
        color: #999;
        padding: 100px 0;
        text-align: center;
        display: none;
    }

    .message-list-empty > .layui-icon {
        color: #ccc;
        display: block;
        font-size: 45px;
        margin-bottom: 15px;
    }

    .show-empty .message-list-empty {
        display: block;
    }

    .show-empty .message-btn-clear, .show-empty .message-list {
        display: none;
    }

    /** //消息列表样式结束 */
</style>